$(function () {
    // 需求1 初始化文章分类列表
    let layer = layui.layer
    // 调用函数
    initArtCateList()
    // 封装函数方便调用
    function initArtCateList() {
        axios({
            method: 'GET',
            url: '/my/article/cates',

        }).then(res => {
            // console.log(res.data);
            if (res.data.status !== 0) {
                return layer.msg(res.data.message)
            }
            let index = 0;
            let arr = [];
            res.data.data.forEach(ele => {
                index++;
                arr.push(`
                <tr>
                <td>${index}</td>
                <td>${ele.name}</td>
                <td>${ele.alias}</td>
                <td>
                    <button data-id='${ele.Id}' class="btn-edit layui-btn layui-btn-xs">编辑</button>
                    <button data-id='${ele.Id}' class="btn-delete layui-btn layui-btn-xs layui-btn-danger">删除</button>
                </td>
            </tr>
                `
                )
            });
            // empty()先清空 在赋值
            $('tbody').empty().html(arr.join(""))
        })
    }
    let indexAdd = null
    $('#btnAdd').on('click', function () {
        indexAdd = layer.open({
            type: 1,
            title: '添加文章分类',
            area: ['500px', '250px'],
            content: `
             <form class="layui-form" id='formAdd'>
             <!-- 第一行 -->
             <div class="layui-form-item">
                 <label class="layui-form-label">分类名称</label>
                 <div class="layui-input-block">
                     <input type="text" name="name" required lay-verify="required" placeholder="请输入名称" autocomplete="off"
                         class="layui-input">
                 </div>
             </div>
               <!-- 第二行 -->
               <div class="layui-form-item">
                 <label class="layui-form-label">分类别名</label>
                 <div class="layui-input-block">
                     <input type="text" name="alias" required lay-verify="required" placeholder="请输入别名" autocomplete="off"
                         class="layui-input">
                 </div>
             </div>
               <!-- 第三行 -->
               <div class="layui-form-item">
                 <div class="layui-input-block">
                     <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
                     <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                 </div>
             </div>
         </form>
             
             `
        });
    })

    // 添加文章分类
    $('body').on('submit', '#formAdd', function (e) {
        e.preventDefault()
        axios({
            method: 'POST',
            url: '/my/article/addcates',
            data: $('#formAdd').serialize()
        }).then(res => {
            if (res.data.status != 0) {
                return layer.msg(res.data.message)
            }
            layer.msg('恭喜您,添加成功!')
            // 关闭对话窗
            layer.close(indexAdd)
            // 刷新页面
            initArtCateList()
        })
    })
    let indexEdit = null
    let form = layui.form
    $('tbody').on('click', '.btn-edit', function () {
        indexEdit = layer.open({
            type: 1,
            title: '修改文章分类',
            area: ['500px', '250px'],
            content: `
             <form lay-filter='dexEdit' class="layui-form" id='dexEdit'>
             <input type='hidden' name='Id'>
             <!-- 第一行 -->
             <div class="layui-form-item">
                 <label class="layui-form-label">分类名称</label>
                 <div class="layui-input-block">
                     <input type="text" name="name" required lay-verify="required" placeholder="请输入名称" autocomplete="off"
                         class="layui-input">
                 </div>
             </div>
               <!-- 第二行 -->
               <div class="layui-form-item">
                 <label class="layui-form-label">分类别名</label>
                 <div class="layui-input-block">
                     <input type="text" name="alias" required lay-verify="required" placeholder="请输入别名" autocomplete="off"
                         class="layui-input">
                 </div>
             </div>
               <!-- 第三行 -->
               <div class="layui-form-item">
                 <div class="layui-input-block">
                     <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
                     <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                 </div>
             </div>
         </form>
             
             `
        });

        let id = $(this).attr('data-id')
        axios({
            method: "GET",
            // :必须删除
            url: '/my/article/cates/' + id,

        }).then(res => {
            //  console.log(res.data)
            if (res.data.status != 0) {
                return layer.msg(res.data.message)
            }
            form.val('dexEdit', res.data.data)
        })
    })
    $('body').on('submit', '#dexEdit', function (e) {
        e.preventDefault()
        axios({
            method: 'POST',
            url: '/my/article/updatecate',
            data: $(this).serialize()
        }).then(res => {
            // console.log(res);
            if (res.data.status != 0) {
                return layer.msg(res.data.message)
            }
            layer.msg('恭喜您,修改成功!')
            // 关闭对话窗
            layer.close(indexEdit)
            // 刷新页面
            initArtCateList()
        })
    })
    $('tbody').on('click', '.btn-delete', function () {
        let id = $(this).attr('data-id')
        //eg1
        layer.confirm('确认删除吗?', { icon: 3, title: '提示' }, function (index) {
            //do something
            axios({
                method: 'GET',
                url: '/my/article/deletecate/' + id
            }).then(res => {
                if (res.data.status != 0) {
                    return layer.msg(res.data.message)
                }
                layer.msg('恭喜您,删除成功!')
                initArtCateList()
            })

            layer.close(index);
        });
    })

})